import React, { Component } from 'react';
import { Table, Icon, Popconfirm, Input, Button, Tooltip } from 'antd';
import Highlighter from 'react-highlight-words';

export default class FormTable extends Component {
    state = {
        searchText: '',
        // 选择操作
        selectedRowKeys: [],
    };
    componentDidMount() {
        this.props.onRef(this)
        // console.log(this.props.onRef(this))
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedRowKeys.length === 0) {
            this.setState({
                selectedRowKeys: []
            })
        }
    }
    // 时间、订单、用户名搜索
    getColumnSearchProps = (dataIndex) => ({
        filterDropdown: ({
            setSelectedKeys, selectedKeys, confirm, clearFilters,
        }) => (
                <div style={{ padding: 8 }}>
                    <Input
                        ref={node => { this.searchInput = node; }}
                        placeholder={'搜索' + (dataIndex === 'orderNumber' ? '订单号' : (dataIndex === 'orderTime' ? '时间' : '用户名'))}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm)}
                        icon="search"
                        size="small"
                        style={{ width: 90, marginRight: 8 }}
                    >
                        搜索
                    </Button>
                    <Button
                        onClick={() => this.handleReset(clearFilters)}
                        size="small"
                        style={{ width: 90 }}
                    >
                        重置
                    </Button>
                </div>
            ),
        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
                setTimeout(() => this.searchInput.select());
            }
        },
        render: (text) => (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[this.state.searchText]}
                autoEscape
                textToHighlight={text.toString()}
            />
        ),
    })
    handleSearch = (selectedKeys, confirm) => {
        confirm();
        this.setState({ searchText: selectedKeys[0] });
    }
    handleReset = (clearFilters) => {
        clearFilters();
        this.setState({ searchText: '' });
    }

    // 选择操作
    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
        this.props.selectedOrders(selectedRowKeys)
    }

    // 实现行的标记效果
    setClassName = (record) => {
        return record.operator === "admin_1" ? "admin_1" : "";
    };

    render() {
        const { searchText, selectedRowKeys } = this.state;
        const { editClick, loading, onDelete, dataSource } = this.props;
        
        // 选择操作
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };

        let benjin = 0;
        let yongjin = 0;
        if (searchText !== '') {
            dataSource.forEach(item => {
                if (item.username.indexOf(searchText) >= 0) {
                    benjin += item.orderPrincipal;
                    yongjin += item.orderCommission
                } else if (item.orderNumber.indexOf(searchText) >= 0) {
                    benjin += item.orderPrincipal;
                    yongjin += item.orderCommission
                } else if (item.orderTime.indexOf(searchText) >= 0) {
                    benjin += item.orderPrincipal;
                    yongjin += item.orderCommission
                }
            })
        } else {
            dataSource.forEach(item => {
                benjin += item.orderPrincipal;
                yongjin += item.orderCommission
            })
        }
        const columns = [{
            title: <span>序号<Tooltip title="按时间分类排序的序号"><Icon type="question-circle-o" /></Tooltip></span>,
            dataIndex: 'index',
        }, {
            title: '时间',
            dataIndex: 'orderTime',
            width: 180,
            ...this.getColumnSearchProps('orderTime'),
        }, {
            title: '订单号/旺旺号',
            dataIndex: 'orderNumber',
            width: 180,
            ...this.getColumnSearchProps('orderNumber'),
        }, {
            title: '用户名',
            dataIndex: 'username',
            ...this.getColumnSearchProps('username'),
        }, {
            title: `本金(${parseFloat(benjin).toFixed(2)}元)`,
            dataIndex: 'orderPrincipal',
            sorter: (a, b) => a.orderPrincipal - b.orderPrincipal
        }, {
            title: `佣金(${parseFloat(yongjin).toFixed(2)}元)`,
            dataIndex: 'orderCommission',
            sorter: (a, b) => a.orderCommission - b.orderCommission
        }, {
            title: '备注',
            dataIndex: 'orderRemarks',
        }, {
            title: '操作',
            dataIndex: 'opera',
            width: 100,
            render: (text, record) =>
                <div className='opera'>
                    <span onClick={() => editClick(record.id)}>
                        <Icon type="edit" /> 修改
                    </span><br />
                    <span><Popconfirm title="确定要删除吗?" onConfirm={() => onDelete(record.id)} okText='确定' cancelText='取消'>
                        <Icon type="minus-square-o" /> 删除 </Popconfirm>
                    </span>
                </div>
        }, {
            title: '其他',
            dataIndex: 'others',
            width: 100,
        }];

        return (
            <div>
                <Table
                    rowKey='id'
                    columns={columns}
                    dataSource={dataSource}
                    bordered={true}
                    className='formTable'
                    rowClassName={this.setClassName}
                    loading={loading}
                    pagination={{ defaultPageSize: 20 }}
                    rowSelection={rowSelection}
                />
            </div>

        )
    }
}
